import React, { useEffect, useState, Component } from 'react';
import { system_historydata } from '../../utils/api'
import '../../styles/Systemhistorydata.scss'

//引入echarts图表库
import * as echarts from 'echarts'
import { type } from '@testing-library/user-event/dist/type';

interface Props {

}
function Systemhistorydata(props: Props) {
    // 获取实时数据中x轴
    var [xaxis, setXaxis] = useState([]);
    // 获取数据
    var [seriesone, setSeriesone] = useState();
    var [seriestwo, setSeriestwo] = useState();

    useEffect(() => {
        system_historydata().then((res) => {
            console.log(res.data.list);
            setXaxis(res.data.list.xAxis);
            setSeriesone(res.data.list.series[0].data)
            setSeriestwo(res.data.list.series[1].data)
        })
    }, [])

    useEffect(() => {
        type EChartsOption = echarts.EChartsOption;
        var chartDom = document.getElementById('container')!;
        // 创建一个 ECharts 实例
        var myChart = echarts.init(chartDom);
        var option: EChartsOption = {
            // 标题
            title: {
                text: '在线服务数据趋势',
                left: 'center'

            },
            grid: {
                left: '3%',
                right: '2%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: 30
            },
            tooltip: {//悬浮提示框（鼠标悬浮提示）
                // position: [10, 10]
            },
            label: { show: true },
            // x轴
            xAxis: {
                data: xaxis,
                type: 'category',
            },
            yAxis: {
                type: 'value'
            },
            // 数据
            series: [
                {
                    name: '接待量',
                    type: 'bar',
                    data: seriesone,

                }
                ,
                {
                    name: '处理量',
                    type: 'bar',
                    data: seriestwo,

                }
            ]
        };
        option && myChart.setOption(option)
    })
    return (
        <div className='systemhistorydata'>
            <p>总览</p>
            <div className="ctn">
                <div className="box">
                    <div className="header">
                        <p>总会话量</p>
                        <span>0</span>
                    </div>
                    <div className="footer">
                        <p>接入会话量<span>0</span></p>
                    </div>
                </div>
                <div className="box">
                    <div className="header">
                        <p>总来访量</p>
                        <span>0</span>
                    </div>
                    <div className="footer">
                        <p>非服务实际来访量<span>0</span></p>
                    </div>
                </div>
                <div className="box">
                    <div className="header">
                        <p>总转出量</p>
                        <span>0</span>
                    </div>
                    <div className="footer">
                        <p>人工转出量<span>0</span></p>
                    </div>
                </div>
                <div className="box">
                    <div className="header">
                        <p>平均会话时长</p>
                        <span>0s</span>
                    </div>
                    <div className="footer">
                        <p>30s应答率<span>0s</span></p>
                    </div>
                </div>
                <div className="box">
                    <div className="header">
                        <p>相对满意率</p>
                        <span>0%</span>
                    </div>
                    <div className="footer">
                        <p>参评率<span>0%</span></p>
                    </div>
                </div>
            </div>
            <p>会话量</p>
            <div id="container" style={{ width: 1100, height: 350 }} ></div>
        </div>
    );
}

export default Systemhistorydata;